<template>
  <view>
    <view id="headinga">
      <!-- <view class="fixed">
				<cu-custom :isBack="true" bgColor=" text-white">
					<block slot="backText">返回</block>
					<block slot="content">垂直导航			{{list_data_left.length}}</block>
				</cu-custom>
			</view> -->
      <view
        style="width: 100vw;height: 400rpx;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 80rpx;">

        <!-- <view class="sub-container"> -->
        <!-- 背景图 -->

        <img :src="campus.img" class="background" mode="aspectFill" />

        <view class="title">{{campus.name}}</view>
        <!-- </view> -->


      </view>
    </view>
    <!-- navScroll -->
    <!-- navNow -->
    <view style="background-color: #fff;display: flex;">


      <category :categoryList="categoryList" :subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
        @categorySubClick="categorySubClick">
        <view class="date_time">
          <view v-for="(item,index) in dateList" :key="index" @click="chooseDate(item.value)"
            :class="{'date_btn':true,'active_btn':item.value==chooseDay }">
            {{item.name}}
          </view>

        </view>

      </category>
    </view>
    </scroll-view>
    <!--  -->


  </view>



  </view>
</template>

<script>
  import category from "../../components/qiyue-category/qiyue-category.vue"
  import {
    getCampusDetail,
    getClassroomStatus
  } from "@/api/campusDetail.js"
  export default {
    components: {
      category
    },
    data() {
      return {
        categoryList: [],
        subCategoryList: [],
        campus: null,
        chooseDay: "",
        chooseBuild: "",
        dateList: [{
          name: "今天",
          value: "2023-6-15"
        }, {
          name: "明天",
          value: "2023-6-16"
        }, {
          name: "后天",
          value: "2023-6-17"
        }],
      }
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      this.campus = wx.getStorageSync("iseats_campus").find(item => item.value == option.campus)
      //找到校区信息

      this.dateList.forEach((el, index) => {
        el.value = this.GetDateStr(index);
      })
      this.chooseDay = this.dateList[0].value;
    },
    methods: {
      categoryMainClick(category) {
        this.chooseBuild = category.id
        this.getClassroomStatus()
      },
      categorySubClick(category) {
        uni.navigateTo({
          url: `/subpkg/buildDetail/buildDetail?classroom_id=${category.classroom_id}&chooseDay=${this.chooseDay}&classroom_name=${category.classroom_name}`
        })
      },
      getCampusDetail() {
        getCampusDetail({
          campus: this.campus.value
        }).then(res => {
          this.categoryList = res.data.data;
          this.chooseBuild = this.categoryList[0].id
          if (this.chooseBuild)
            this.getClassroomStatus()
          else this.subCategoryList = []
        })
      },
      chooseDate(day) {
        this.chooseDay = day;
        this.getClassroomStatus()
      },
      GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1; //获取当前月份的日期
        if (m < 10) m = "0" + m;
        var d = dd.getDate();
        return y + "-" + m + "-" + d;
      },
      getClassroomStatus() {
        getClassroomStatus({
          building_id: this.chooseBuild,
          time: this.chooseDay
        }).then(res => {
          res.data.data.forEach(el => {
            el.name = el.floor + "层 " + el.classroom_name
          });
          this.subCategoryList = res.data.data.filter(el => el.ifopen)

        })
      }
    },
    mounted() {
      this.getCampusDetail();

    }
  }
</script>

<style>
  .background {
    /*   position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    /* top: 0;
       bottom: 0;
       right: 0;
       left: 0; */
    line-height: 208px;
    z-index: 2;
  }

  .date_time {
    width: 240px;
    padding: 5px 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .date_btn {
    width: 100rpx;
    height: 60rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    display: flex;
    background-color: #9bd9ff;
    color: #fff;
    align-items: center;
    justify-content: center;
  }

  .active_btn {
    background-color: #2196f3;
  }
</style>